<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-s-grid"></i> 品目 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="categoryactiveName">
                <!-- 点击品目列表 -->
                <el-tab-pane label="品目" name="first">
                    <div class="handle-box">
                        <el-button type="danger" @click="btndellist"><i class="el-icon-delete-solid"></i>批量删除</el-button>
                        <el-input placeholder="用户名" class="handle-input mr10 userhandle" v-model="categoryvalueKey"></el-input>
                        <el-button type="primary" icon="el-icon-search" @click="Search">搜索</el-button>
                        <el-button type="primary" id="adduser" @click="btnadd"><span class="add">+</span> 新增</el-button>
                    </div>
                    <!-- 品目表格 -->
                    <el-table
                        :data="Customeruserlist"
                        border
                        class="table"
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55" align="center"> </el-table-column>
                        <el-table-column prop="kind_name" label="名称" width="180" align="center"></el-table-column>
                        <el-table-column prop="kind_no" label="模式" align="center"></el-table-column>
                        <el-table-column prop="sort" label="排序" align="center"></el-table-column>
                        <el-table-column label="状态" align="center" width="200">
                            <template slot-scope="scope">
                                <el-switch
                                    v-model="scope.row.states"
                                    active-value="1"
                                    inactive-value="2"
                                    active-text="显示中"
                                    inactive-text="不显示"
                                    @change="changeSwitch($event, scope.row, scope.$index)"
                                ></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="400" align="center">
                            <template slot-scope="scope">
                                <el-button @click="categorybtnView(scope.row)" class="bd_item"
                                    ><i class="el-icon-edit"></i>绑定品类</el-button
                                >
                                <el-button plain @click="Customerbtnchange(scope.row)" class="bd_item"
                                    ><i class="el-icon-edit"></i>编辑</el-button
                                >
                                <el-button plain @click="CustomerbtnObtain(scope.row)" class="del_item"
                                    ><i class="el-icon-delete"></i>删除</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <el-pagination
                        background
                        layout="total,prev, pager, next"
                        :total="count"
                        :page-size="10"
                        @current-change="handleCurrentChange"
                        :current-page.sync="queryinfo.page"
                        @size-change="handleSizeChange"
                    >
                    </el-pagination>
                </el-tab-pane>
                <!-- 品类 -->
                <el-tab-pane label="品类" name="second">
                    <template v-if="categoryactiveName === 'second'">
                        <!-- 品类搜索框 -->
                        <div class="handle-box">
                            <el-button type="danger" @click="CategoryAndBatchDel"><i class="el-icon-delete-solid"></i>批量删除</el-button>
                            <el-input placeholder="标题" class="handle-input mr10 userhandle" v-model="categoryKey"></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="caterorySearch">搜索</el-button>
                            <el-button type="primary" id="adduser" @click="btnaddCategory"><span class="add">+</span> 新增</el-button>
                            <span class="tabeheared">{{ CategoryTitle }}</span>
                        </div>
                        <!-- 品类表格 -->
                        <el-table
                            :data="categorylist"
                            border
                            class="table"
                            ref="multipleTable"
                            header-cell-class-name="table-header"
                            @selection-change="categoryhandleSelectionChange"
                        >
                            <el-table-column type="selection" width="55" align="center"> </el-table-column>
                            <el-table-column prop="type_img" label="商品图" width="180" align="center">
                                <template slot-scope="scope">
                                    <el-image
                                        style="width: 100px; height: 100px"
                                        :src="scope.row.prefix_type_img"
                                        :preview-src-list="categorysrcList"
                                    ></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column prop="sort" label="排序" align="center"></el-table-column>
                            <el-table-column prop="type_name" label="标题" align="center"></el-table-column>
                            <el-table-column prop="type_no" label="文本一" align="center"></el-table-column>
                            <el-table-column label="状态" align="center" width="200">
                                <template slot-scope="scope">
                                    <el-switch
                                        v-model="scope.row.states"
                                        active-value="1"
                                        inactive-value="2"
                                        active-text="显示中"
                                        inactive-text="不显示"
                                        @change="changeSwitch1($event, scope.row, scope.$index)"
                                    ></el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="200" align="center">
                                <template slot-scope="scope">
                                    <el-button plain @click="categorybtnchange(scope.row)" class="bd_item"
                                        ><i class="el-icon-edit"></i>编辑</el-button
                                    >
                                    <el-button plain @click="categorydel(scope.row)" class="del_item"
                                        ><i class="el-icon-delete"></i>删除</el-button
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 查看表格分页 -->
                        <div class="block">
                            <el-pagination :page-size="100" layout="total, prev, pager, next" :total="type_count"> </el-pagination>
                        </div>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!--点击品目编辑按钮-->
        <el-dialog title="编辑" :visible.sync="CuDialogVisiblechange" width="30%">
            <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="排序" prop="sort">
                    <el-input type="text" v-model="ruleForm.sort" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="品目" prop="kind_name">
                    <span>{{ ruleForm.kind_no }}</span
                    >-
                    <span>{{ ruleForm.kind_name }}</span>
                </el-form-item>
                <el-form-item label="状态" prop="states">
                    <template>
                        <el-switch
                            v-model="ruleForm.states"
                            active-value="1"
                            inactive-value="2"
                            active-text="显示"
                            inactive-text="不显示"
                        ></el-switch>
                    </template>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="CuDialogVisiblechange = false">取 消</el-button>
                <el-button type="primary" @click="CubtnBinding">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 点击品类编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="categoryVisiblechange" width="30%">
            <el-form :model="categoryruleForm" status-icon ref="categoryruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="品类">
                    <span>{{ categoryruleForm.type_no }}</span
                    >-
                    <span>{{ categoryruleForm.type_name }}</span>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input type="text" v-model="categoryruleForm.type_sort" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="states">
                    <template>
                        <el-switch
                            v-model="categoryruleForm.states"
                            active-value="1"
                            inactive-value="2"
                            active-text="显示"
                            inactive-text="不显示"
                        ></el-switch>
                    </template>
                </el-form-item>
                <el-form-item label="编辑图">
                    <el-upload
                        class="avatar-uploader"
                        action="http://yztapi.medozb.com/api/admin/upload_img"
                        :data="{
                            token: queryinfo.token,
                            url: kind_no,
                            is_name: 0
                        }"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="categoryruleForm.type_img" :src="categoryruleForm.type_img" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="categoryruleForm.type_img" alt="" />
                    </el-dialog>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="categoryVisiblechange = false">取 消</el-button>
                <el-button type="primary" @click="categoryedit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 点击品目新增弹出框 -->
        <el-dialog title="编辑" :visible.sync="newVisiblechange" width="30%">
            <el-form :model="NewruleForm" status-icon ref="newruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="排序" prop="sortNum">
                    <el-input type="text" v-model="NewruleForm.sortNum" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="品目" prop="kind_name">
                    <el-select v-model="value" placeholder="请选择" filterable @change="changeValue" 
                    >
                        <el-option
                            v-for="item in dropDown"
                            :key="item.kind_no"
                            :label="item.kind_no + item.kind_name"
                            :value="item.kind_no"
                        >
                            <span style="float: left">{{ item.kind_no }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.kind_name }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="states">
                    <template>
                        <el-switch
                            v-model="ruleForm.states"
                            active-value="1"
                            inactive-value="2"
                            active-text="显示"
                            inactive-text="不显示"
                            @change="changeSwitch2($event)"
                        ></el-switch>
                    </template>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="newVisiblechange = false">取 消</el-button>
                <el-button type="primary" @click="NewbtnAdd">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 点击品类新增弹出框 -->
        <el-dialog title="编辑" :visible.sync="newVisiblecaterory" width="30%" :before-close="handleClose">
            <el-form :model="NewruleFormcaterory" status-icon ref="newForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="品类" prop="sortNum">
                    <el-select v-model="valuecaterory" placeholder="请选择"  filterable @change="changeValuecaterory" remote >
                        <el-option
                            v-for="item in caterorydropDown"
                            :key="item.kind_no"
                            :label="item.kind_no + item.kind_name"
                            :value="item.kind_no"
                        >
                            <span style="float: left">{{ item.kind_no }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.kind_name }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input type="text" v-model="NewruleFormcaterory.type_sort" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="states">
                    <template>
                        <el-switch
                            v-model="NewruleFormcaterory.states"
                            active-value="1"
                            inactive-value="2"
                            active-text="显示"
                            inactive-text="不显示"
                            @change="categorychangeswitch($event)"
                        ></el-switch>
                    </template>
                </el-form-item>
                <el-form-item label="新增图">
                    <el-upload
                        class="avatar-uploader"
                        action="http://yztapi.medozb.com/api/admin/upload_img"
                        :data="{
                            token: queryinfo.token,
                            url: kind_no,
                            is_name: 0
                        }"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="imageUrls" :src="imageUrls" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="imageUrls" alt="" />
                    </el-dialog>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelbtn('newForm')">取 消</el-button>
                <el-button type="primary" @click="NewbtnAddcategory">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'Item',
    data() {
        return {
            categoryactiveName: 'first',
            // 获取用户列表的参数
            queryinfo: {
                token: '',
                page: 1,
                page_size: 10,
                keyword: this.categoryvalueKey
            },
            //编辑保存用户列表
            value: '',
            count: 0,
            //删除
            dellsit: [],
            // 修改品目
            newVisiblechange: false,
            ruleForm: {
                sort: '',
                kind_name: '',
                states: '',
                kind_no: ''
            },
            NewruleForm: {
                sortNum: '',
                states: false
            },
            kind_nos: '',
            categoryKey: '',
            // 总头数
            CusdialogVisible: false,
            states: '',
            kind_no: '',
            sorts: '',
            //更改编辑
            CuDialogVisiblechange: false,
            // 获取品目列表
            Customeruserlist: [],
            //编辑点击事件列表
            changlist: [],
            // 下拉列表
            dropDown: [],
            //批量删除kind_no列表
            kind_nolist: '',
            //品类
            category: {},
            //品类标题
            CategoryTitle: '',
            //品目传品类的kind_no
            categorykind_no: '',
            //品目输入框的value
            categoryvalueKey: '',
            // 品类列表
            categorylist: [],
            //品类列表图片数组
            categorysrcList: [],
            newVisiblecaterory: false,
            categoryVisiblechange: false,
            //点击编辑弹出框
            categoryruleForm: {
                type_no: '',
                type_name: '',
                type_sort: '',
                states: '',
                type_img: ''
            },
            //保存图片
            type_img: '',
            //点击品类新增弹出框表格form
            NewruleFormcaterory: {
                type_sort: '',
                typeSort: ''
            },
            // 下拉框
            type_count: 0,
            loading:false,
            //品类下拉框的value
            valuecaterory: '',
            //品类下拉列表
            caterorydropDown: [],
            // type_kind: '',
            type_no: '',
            type_kindlist: '',
            Id: '',
            type_status: '',
            //上传图片
            imageUrls: '',
            imageUrl: '',
            dialogVisible: false,
            demolist:[]
            // dialogImageUrl: ''
        };
    },
    created() {
        this.getkey();
        this.Cugetlist();
    },
    mounted() {
        this.options = this.dropDown;
    },
    methods: {
        // 获取token
        getkey() {
            this.queryinfo.token = sessionStorage.getItem('token');
        },
        async Cugetlist() {
            const { data: res } = await this.$axios.get('admin/gen_kind_list', {
                params: this.queryinfo
            });
            if (res.code !== 2000) {
                return this.$message.error('获取品目列表失败');
            }
            this.Customeruserlist = res.data.data;
            this.kind_no = res.data.data[0].kind_no;
            this.NewruleForm.sortNum = this.Customeruserlist[this.Customeruserlist.length - 1].sort;
            this.NewruleForm.sortNum++;
            this.states = this.Customeruserlist[0].states;
            this.count = res.data.count;
            this.sorts = res.data.data[0].sort;
        },
        // 触发品目搜索按钮
        Search() {
            this.queryinfo.keyword = this.categoryvalueKey;
            this.Cugetlist();
            // console.log(this.keyword)
        },
        //触发品类搜索按钮
        caterorySearch() {
            this.keyword = this.categoryKey;
            console.log(this.keyword);
            this.categoryfn();
        },
        // 监听pagesize改变的事件
        handleSizeChange(newSize) {
            // console.log(newSize);
            this.queryinfo.page = newSize;
            this.Cugetlist();
        },
        // 监听页码值的改变的事件
        handleCurrentChange(newPage) {
            // console.log(newPage);
            this.queryinfo.newPage = newPage;
            this.Cugetlist();
        },
        // 点击删除按钮
        CustomerbtnObtain(row) {
            this.$confirm('删除品目会同时删除里面的品类，确定删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then((action) => {
                    if (action === 'confirm') {
                        this.$axios
                            .get('admin/gen_kind_delete', {
                                params: {
                                    token: this.queryinfo.token,
                                    kind_no: row.kind_no
                                }
                            })
                            .then((res) => {
                                if (res.status == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                }
                                this.Cugetlist();
                            });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        //获取下拉框kind—no
        changeValue(val) {
            this.kind_nos = val;
            console.log('val',val);
        },
        //品类弹出框switch
        categorychangeswitch(e) {
            this.NewruleFormcaterory.states = e;
        },
        //品类弹出框取消
        cancelbtn(newForm) {
            this.newVisiblecaterory = false;
            this.$nextTick(() => {
                this.$refs[newForm].resetFields(); // this.$refs.form.resetFields();
            });
            this.NewruleFormcaterory.type_sort = '';
            this.valuecaterory = '';
            this.NewruleFormcaterory.type_sort = '';
            this.NewruleFormcaterory.states = 2;
            this.imageUrls = '';
        },
        //品类全选
        categoryhandleSelectionChange(val) {
            console.log(val);
            this.type_kindlist = val
                .map(function (obj, index) {
                    return obj.id;
                })
                .join(',');
            console.log(this.type_kindlist);
        },
        //批量删除
        btndellist() {
            this.$confirm('删除品目会同时删除里面的品类，确定删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then((action) => {
                    console.log(this.kind_nolist);
                    if (action === 'confirm') {
                        this.$axios
                            .get('admin/gen_kind_delete', {
                                params: {
                                    token: this.queryinfo.token,
                                    kind_no: this.kind_nolist
                                }
                            })
                            .then((res) => {
                                if (res.status == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                }
                                this.Cugetlist();
                            });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        //品类批量删除
        CategoryAndBatchDel() {
            this.$confirm('删除品目会同时删除里面的品类，确定删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then((action) => {
                    if (action === 'confirm') {
                        this.$axios
                            .get('admin/kind_type_delete', {
                                params: {
                                    token: this.queryinfo.token,
                                    id: this.type_kindlist
                                }
                            })
                            .then((res) => {
                                if (res.status == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                }
                                this.categoryfn();
                            });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        // 品目编辑事件
        Customerbtnchange(row) {
            // console.log(row);
            this.CuDialogVisiblechange = true;
            this.ruleForm.sort = row.sort;
            this.ruleForm.kind_name = row.kind_name;
            this.ruleForm.states = row.states;
            this.ruleForm.kind_no = row.kind_no;
        },
        //点击刷新品类列表
        categoryfn() {
            this.$axios
                .get('admin/kind_type_list', {
                    params: {
                        token: this.queryinfo.token,
                        kind_no: this.type_kind,
                        page: this.queryinfo.page,
                        page_size: this.queryinfo.page_size,
                        keyword: this.categoryKey
                    }
                })
                .then((res) => {
                    this.categorylist = res.data.data.data;
                });
        },
        //点击绑定品类类目列表
        categorybtnView(row) {
            this.categoryactiveName = 'second';
            // console.log(row.kind_no)
            this.type_status = row.states;
            this.CategoryTitle = row.kind_name;
            this.type_kind = row.kind_no;
            this.$axios
                .get('admin/kind_type_list', {
                    params: {
                        token: this.queryinfo.token,
                        kind_no: row.kind_no,
                        page: this.queryinfo.page,
                        page_size: this.queryinfo.page_size,
                        keyword: this.categoryKey
                    }
                })
                .then((res) => {
                    this.categorylist = res.data.data.data;
                    // console.log(this.categorylist);
                    // console.log('res', res);
                    // this.type_status = this.categorylist[0].states;
                    // console.log(this.categorylist);
                    this.categorysrcList = res.data.data.data.map((item) => {
                        return item.prefix_type_img;
                    });
                    // console.log(this.categorysrcList)
                    if (this.categorylist.length !== 0) {
                        this.NewruleFormcaterory.type_sort = this.categorylist[this.categorylist.length - 1].sort;
                        this.NewruleFormcaterory.type_sort++;
                        this.type_count = res.data.data.count;
                    }

                    // console.log(this.NewruleFormcaterory.type_sort);
                });
        },
        //点击新增品类下拉列表
        btnaddCategory() {
            this.newVisiblecaterory = true;
            this.$axios
                .get('admin/gen_kind_pull', {
                    params: {
                        token: this.queryinfo.token
                    }
                })
                .then((res) => {
                    this.caterorydropDown = res.data.data.type;
                });
        },
        //品类下拉框value改变事件
        changeValuecaterory(val) {
            // console.log('valuecaterory', this.valuecaterory);
            // console.log('val', val);
            this.type_no = val;
            // console.log(this.type_no);
        },
        //点击新增品类弹出框确定按钮
        NewbtnAddcategory() {
            this.newVisiblecaterory = false;
            this.$axios
                .post('admin/kind_type_add', {
                    token: this.queryinfo.token,
                    kind_no: this.type_kind,
                    type_no: this.type_no,
                    img: this.imageUrl,
                    sort: this.NewruleFormcaterory.type_sort,
                    states: this.NewruleFormcaterory.states
                })
                .then((res) => {
                    this.type_img = res.data.data.type_img;
                    this.$message.success('添加完成');
                    this.categoryfn();
                    this.NewruleFormcaterory.type_sort = '';
                    this.valuecaterory = '';
                    this.NewruleFormcaterory.type_sort = '';
                    this.NewruleFormcaterory.states = 2;
                    this.imageUrls = '';
                });
        },
        //品类switch表格开关事件
        changeSwitch1(e, row, index) {
            console.log(e, row, index);
            this.$axios
                .post('admin/kind_type_update', {
                    token: this.queryinfo.token,
                    id: row.id,
                    img: row.type_img,
                    sort: row.sort,
                    states: row.states
                })
                .then((res) => {
                    console.log(res);
                });
        },
        //品目sithch开关事件
        changeSwitch2(row) {
            // console.log(row);
        },
        //新增弹出框关闭事件
        handleClose() {
            this.newVisiblecaterory = false;
            this.$nextTick(() => {
                this.NewruleFormcaterory.type_sort = '';
                this.valuecaterory = '';
                this.NewruleFormcaterory.type_sort = '';
                this.NewruleFormcaterory.states = 2;
                this.imageUrls = '';
                this.$refs['newForm'].resetFields();
            });
        },
        //上传图片方法
        //图片上传的成功回调
        handleAvatarSuccess(res, file) {
            // console.log(res);
            this.imageUrls = file.response.data.imgs;
            this.imageUrl = file.response.data.img;
            // console.log(this.type_img);
            if (res.code === 2000) {
                if (file.response.data.img === this.type_img) {
                    this.imageUrls = this.categoryruleForm.type_img;
                    console.log('没有更改图片');
                } else {
                    this.categoryruleForm.type_img = file.response.data.imgs;
                    this.type_img = file.response.data.img;
                }
            }
        },
        //上传文件之前的回调，参数为上传的文件
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || 'image/jpg' || 'image/webp' || 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('图片格式不正确！(只能包含jpg，png,webp,JPEG)');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        // 品类点击删除
        categorydel(row) {
            // console.log(row);
            // console.log(row.id);
            this.$confirm('删除品目会同时删除里面的品类，确定删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then((action) => {
                    if (action === 'confirm') {
                        this.$axios
                            .get('admin/kind_type_delete', {
                                params: {
                                    token: this.queryinfo.token,
                                    id: row.id
                                }
                            })
                            .then((res) => {
                                if (res.status == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                }
                                this.categoryfn();
                            });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        //品类编辑事件
        categorybtnchange(row) {
            this.categoryVisiblechange = true;
            this.categoryruleForm.type_no = row.type_no;
            this.categoryruleForm.type_name = row.type_name;
            this.categoryruleForm.type_sort = row.sort;
            this.categoryruleForm.states = row.states;
            this.type_img = row.type_img;
            this.Id = row.id;
            // this.editsort = row.sort
            this.categoryruleForm.type_img = row.prefix_type_img;
        },
        //品类编辑弹出框确定按钮
        categoryedit() {
            this.$axios
                .post('admin/kind_type_update', {
                    token: this.queryinfo.token,
                    id: this.Id,
                    img: this.type_img,
                    sort: this.categoryruleForm.type_sort,
                    states: this.categoryruleForm.states
                })
                .then((rss) => {
                    this.categoryVisiblechange = false;
                    this.$message.success('修改成功');
                    this.categoryfn();
                });
        },
        // //远程搜索
        // remoteMethod(val){
        //     // console.log('wozia',query)
        //     console.log(this.caterorydropDown)
           

        // },
        // 编辑点击事件
        async CubtnBinding() {
            this.$axios
                .post('admin/gen_kind_update', {
                    token: this.queryinfo.token,
                    kind_no: this.kind_no,
                    sort: this.ruleForm.sort,
                    states: this.ruleForm.states
                })
                .then((res) => {
                    this.changlist = res.data;
                    if (this.changlist.code !== 2000) {
                        this.$message.error('修改失败');
                        return;
                    }
                    this.$message.success('修改成功');
                    this.CuDialogVisiblechange = false;
                    this.Cugetlist();
                    console.log(this.changlist);
                });
        },
        // 点击新增事件
        NewbtnAdd() {
            this.newVisiblechange = false;
            console.log(this.NewruleForm.sortNum);
            this.$axios
                .post('admin/gen_kind_add', {
                    token: this.queryinfo.token,
                    kind_no: this.kind_nos,
                    sort: this.NewruleForm.sortNum,
                    states: this.ruleForm.states
                })
                .then((res) => {
                    this.Cugetlist();
                });
        },
        // 品目表格switch开关
        changeSwitch(e, row, index) {
            row.token = this.queryinfo.token;
            this.$axios.post('admin/gen_kind_update', row).then((res) => {});
        },
        // 新增按钮,下拉框
        btnadd() {
            this.newVisiblechange = true;
            this.$axios
                .get('admin/gen_kind_pull', {
                    params: {
                        token: this.queryinfo.token
                    }
                })
                .then((res) => {
                    this.dropDown = res.data.data.kind;
                    console.log('this.dropDown', this.dropDown);
                })
                .catch((err) => {});
        },
        //全选
        handleSelectionChange(val) {
            // console.log(val);
            this.kind_nolist = val
                .map(function (obj, index) {
                    return obj.kind_no;
                })
                .join(',');
            // console.log('wozai', this.kind_nolist);
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}
.bd_item {
    /* background-color: white; */
    border: 0px;
    color: rgb(64, 158, 255);
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.userhandle {
    margin-left: 10px;
}
.del_item {
    border: 0px;
    color: red;
}
.add {
    font-size: 12px;
}
#adduser {
    margin-right: 10px;
}
.inputhour {
    display: flex;
    justify-content: space-between;
}
.table {
    width: 100%;
    font-size: 14px;
}
.hadle1 {
    width: 80%;
    margin-left: 10px;
}
.spanitem {
    margin-left: 10px;
}
.span1 {
    color: gainsboro;
    margin-top: -30px;
    position: absolute;
}
/* .el-upload--text{
    width: 180px;
} */
/deep/.el-upload--text {
    width: 180px;
}
.el-pagination {
    margin-top: 10px;
}
.tabeheared {
    width: 20px;
    color: rgb(64, 158, 255);
    font-weight: bolder;
}
#dialogbox {
    text-align: left;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
#upload .el-upload--text {
    width: 0;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
